<template>
  <div id="app">
    <hello-world v-for="(item,index) in data" :key="index" :item="item">

    </hello-world>




    <button @click="status = !status">
      动画
    </button>
    <transition name="ani">
      <div v-if="status" class="ani"></div>
    </transition>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import axios from 'axios'

export default {
  name: 'App',
  created(){
    axios.get("/list").then(res => {
      if(res.data.code == 0){ 
        this.data = res.data.asg
      }
    })
  },
  data(){
    return {
      status:true,
      data:[]
    }
  },
  components: {
    HelloWorld,
  }
}
</script>

<style>
html,body{
  width: 100%;
  height: 100%;
  
}
*{padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
#app {
  width: 100%;
  height: 100%;
}
.ani{
  width: 150px;
  height: 150px;
  background: red;
} 
.ani-enter-active{
  animation: aa 1s;
}
/* .ani-enter-active{
  transition: opacity .5s;
} */
/* .ani-enter-to{
   opacity: 1;
} */
.ani-leave-active{
  animation: aa 1s reverse;
}
/* .ani-leave-active{
  transition: opacity 1s;
}
.ani-leave-to{
  opacity :0;
} */
@keyframes aa {
    0% {
       width: 0px;
       height: 0px;
       opacity:0;
  }
  50% {
    width: 100px;
    height: 100px;
    opacity:0.5;
  }
  100% {
    height: 150px;
      width: 150px;
      opacity: 1;
  }
}
</style>
